<!-- 法律问题检索tabs的panel  -->
<template>
  <div class="legal-pane">
    <div class="legal-pane__title">检索表达式</div>
    <!-- 表达式  -->
    <div class="legal-pane__expression">
      <!-- whm增加事件開始 -->
      <LegalPaneExpression :expression-res="expressionRes" @expressionChange="expressionStr" />
      <!-- whm結束事件 -->
    </div>
    <div class="legal-pane__title">法律问题树</div>
    <el-form
      ref="lawQaTree"
      :model="checkedTree"
      style="margin-left: 10px;"
      :label-width="labelWidth"
    >
      <!-- 复审法律问题 tab显示  -->
      <template v-if="paneName === 'fushen'">
        <el-form-item label="复审法律问题阶段:">
          <!-- whm增加事件開始 -->
          <el-checkbox-group v-model="checkedTree.recheck">
            <el-checkbox v-for="(item,idx) in recheckList" :key="idx" :label="item" />
          </el-checkbox-group>
          <!-- whm結束事件 -->
        </el-form-item>
        <el-form-item label="法律问题结论:">
          <el-checkbox-group v-model="checkedTree.radio">
            <el-checkbox label="符合">符合</el-checkbox>
            <el-checkbox label="不符合">不符合</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </template>
      <!-- 司法判决法律问题显示  -->
      <template v-else-if="paneName === 'susong'">
        <el-form-item label="提及方:">
          <el-checkbox-group v-model="checkedTree.mention">
            <el-checkbox v-for="item in mentionList" :label="item" />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="法律问题结论:">
          <el-checkbox-group v-model="checkedTree.conclusion">
            <el-checkbox v-for="item in conclusionList" :label="item" />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="与复审无效决定理由比较:">
          <el-checkbox-group v-model="checkedTree.compare">
            <el-checkbox v-for="item in compareList" :label="item" />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="程序问题:">
          <el-checkbox-group v-model="checkedTree.process">
            <el-checkbox v-for="item in processList" :label="item" />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="程序问题结论:">
          <el-checkbox-group v-model="checkedTree.processConclusion">
            <el-checkbox label="合法">合法</el-checkbox>
            <el-checkbox label="违法">违法</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </template>
      <!-- 无效法律问题显示  和观法律问题显示 -->
      <template v-else>
        <el-form-item label="外观法律问题阶段:">
          <el-checkbox-group v-model="checkedTree.wuxiao">
            <el-checkbox label="授权阶段通知书和可能存在的决定" />
            <el-checkbox label="无效决定" />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="法律问题结论:">
          <el-checkbox-group v-model="checkedTree.clusion">
            <el-checkbox label="符合" />
            <el-checkbox label="不符合" />
            <el-checkbox label="放弃" />
            <el-checkbox label="未发表意见" />
          </el-checkbox-group>
        </el-form-item>
      </template>
    </el-form>
    <!-- 专利法  -->
    <el-row type="flex" align="center" justify="space-between">
      <el-card
        class="legal-pane__card"
        shadow="never"
        :body-style="{ padding: '20px',height: '500px', overflow: 'auto' }"
      >
        <div slot="header">
          <span>专利法</span>
          <span
            :class="['evidence-main-title-r',{'is-active':expandAll12}]"
            @click="onExpand('expandAll12','patentTreeDataRef')"
          >{{ expandAll12?'全部收缩':'全部展开' }}
            <i class="fa fa-angle-double-down" />
          </span>
        </div>
        <!-- inner  -->
        <!--
          :default-expanded-keys="[2, 3]"
          :default-checked-keys="[5]"
          -->
        <!-- DLJ MODIFY START -->
        <el-tree
          ref="patentTreeDataRef"
          :data="patentTreeData"
          show-checkbox
          node-key="id"
          :props="defaultProps"
          default-expand-all
          @check="handleNodeClick"
        />
        <!-- DLJ MODIFY END -->
      </el-card>
      <el-card
        class="legal-pane__card"
        shadow="never"
        :body-style="{ padding: '20px',height: '500px', overflow: 'auto' }"
      >
        <div slot="header">
          <span>实施细则</span>
          <span
            :class="['evidence-main-title-r',{'is-active':expandAll13}]"
            @click="onExpand('expandAll13','implementationDetailsDataRef')"
          >{{ expandAll13?'全部收缩':'全部展开' }}
            <i class="fa fa-angle-double-down" />
          </span>
        </div>
        <!-- inner  -->

        <!-- DLJ MODIFY START -->
        <el-tree
          ref="implementationDetailsDataRef"
          :data="implementationDetailsData"
          show-checkbox
          node-key="id"
          :props="defaultProps"
          @check="implementationHandleNodeClick"
        />
        <!-- DLJ MODIFY END -->

      </el-card>
    </el-row>
    <div class="legal-pane__title">著录项</div>
    <el-form class="legal-pane__form" :model="search" label-width="120px" inline>
      <el-form-item label="主分类号：" prop="categoryNo">
        <el-input v-model="search.categoryNo" placeholder="例如：分类号" />
      </el-form-item>
      <el-form-item label="申请日：" prop="applyDay">
        <el-date-picker
          v-model="search.applyDay"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <div>
        <el-form-item label="案源处室：" prop="room">
          <el-input v-model="search.room" placeholder="例如：处室" />
        </el-form-item>
        <el-form-item label="全文关键字：" prop="keyword">
          <el-input v-model="search.keyword" placeholder="例如：关键字" />
        </el-form-item>
      </div>
      <el-form-item label="决定日：" prop="decideDay">
        <el-date-picker
          v-model="search.decideDay"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
    </el-form>
    <div class="legal-pane__footer">
      <el-button type="primary" icon="el-icon-search" style="width: 190px" @click="_lawBuildSearch()">检索</el-button>
      <el-button icon="el-icon-delete" @click="clearAllSerachData()">清除全部检索条件</el-button>
    </div>
  </div>
</template>

<script>
// whm增加事件开始
import LegalPaneExpression from '@components/common/legal-pane-expression'
import { getImplementationDetailsTree, getPatentLawTree, lawBuildSearch } from '@api/fastSerach'
// whm增加事件结束
export default {
  name: 'LegalPane',
  // whm增加事件开始
  components: { LegalPaneExpression },
  // whm增加事件结束
  filters: {

  },
  props: {
    paneName: {
      type: String,
      default: 'fushen'
    }
  },
  data() {
    return {
      checkedTree: {
        clusion: [], // 法律问题结论
        wuxiao: [], // 外观法律问题阶段
        radio: [], // 法律问题结论
        recheck: [], // 复审法律问题阶段
        mention: [], // 提及方
        conclusion: [], // 法律问题结论
        compare: [], // 与复审无效决定理由比较
        process: [], // 程序问题
        processConclusion: [] // 程序问题结论
      },
      expandAll12: false,
      expandAll13: false,
      /*  checkbox options */
      // 提及方
      mentionList: [
        '原告/上诉人/申诉人(再审申请人)',
        '被告/被上诉人/被申诉人',
        '第三人',
        '法院以职权印入',
        '本院认为部分提及'
      ],
      // 程序问题结论
      processConclusionList: [
        '合法',
        '违法'
      ],
      // 法律问题结论
      conclusionList: [
        '符合',
        '不符合',
        '未发表意见',
        '结论为法条是否符合'
      ],
      // 与复审无效决定理由比较
      compareList: [
        '支持结论',
        '不支持结论',
        '未发表意见',
        '复审无效决定未提及'
      ],
      processList: [
        '听证原则',
        '请求原则',
        '依职权审查',
        '形式审查相关问题',
        '合议组成员回避',
        '举证期限(仅无效有)',
        '当事人主体资格(仅无效有)',
        '是否结合理由具体说明(仅无效有)',
        '驳回无效请求(仅无效有)',
        '其他'
      ],
      recheckList: [
        '实质审查通知书',
        '实审驳回决定决定理由',
        '前置审查意见',
        '复审通知书',
        '复审决定',
        '其他时机'
      ],
      patentTreeData: [],
      implementationDetailsData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      search: {
        categoryNo: '', // 主分类号
        applyDay: '', // 申请日
        room: '', // 案源处室
        keyword: '', // 全文关键字
        decideDay: ''// 决定日
      },
      // whm增加事件开始
      patentData: '', // tree选中表达式
      searchDataText: '', // 输入框选中表达式
      implementationData: '', // 实施细则
      expressionAllStr: '', // 法律问题树表达式
      editExpressionStr: null, // 点击编辑修改内容
      expressionStrResult: null// 点击编辑修改内容
      // whm增加事件结束
    }
  },
  // whm結束事件

  computed: {
    labelWidth() {
      if (this.paneName !== 'susong') {
        return '150px'
      }
      return '200px'
    },
    // whm增加事件开始
    // 最终表达式
    expressionRes() {
      const searchDataText = this.searchDataText.replace(/( and )$/, '')
      console.log('--searchDataText-----------', this.searchDataText !== '')
      const expressionAllStr = searchDataText !== '' ? this.expressionAllStr : this.expressionAllStr.replace(/(^ and)||(^and)/, '')
      const patentData = expressionAllStr !== '' || this.searchDataText !== '' ? this.patentData : this.patentData.replace(/(^ and)||(^and)/, '')
      const implementationData = this.searchDataText !== '' || expressionAllStr !== '' || patentData !== '' ? this.implementationData : this.implementationData.replace(/(^ and)||(^and)/, '')
      // return `${searchDataText}${expressionAllStr}${patentData}${implementationData}`
      const resStr = `${searchDataText}${expressionAllStr}${patentData}${implementationData}`
      let result = ''
      if (this.editExpressionStr !== null && this.editExpressionStr.isShow) {
        this.clearAllSerachData('clearAllSF')
        result = this.editExpressionStr.val
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.editExpressionStr.isShow = false
      } else {
        result = resStr
      }
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      this.expressionStrResult = result
      return result
    }
    // whm結束事件
  },
  watch: { // 法律问题树
    checkedTree: {
      handler: function(val, olVal) {
        this.checkedTreeChange()
        console.log('我变化了法律问题树------------')// 但是val和olVal值一样
        console.log('法律问题树', this.expressionAllStr)
      },
      deep: true
    }, // 著录项
    search: {
      handler: function(val, olVal) {
        this.searchChange()
        console.log('我变化了', val, olVal)// 但是val和olVal值一样
      },
      deep: true
    }
  },
  // computed: {
  // computed: {
  // DLJ MODIFY START
  created() {
    console.log('--------------  created() start ---------------')
    this._getImplementationDetailsTree('fushen')   // 获取实施细则树形结构(fushen：默认传入的页签名，第一个页签)
    this._getPatentLawTree('fushen')               // 获取专利法树形结构  (fushen：默认传入的页签名，第一个页签)
    console.log('--------------  created() end ---------------')
  },
  mounted() {
  },
  methods: { // //编辑修改内容
    expressionStr(val) {
      console.log('---编辑修改内容---------', val)
      this.editExpressionStr = val
    },
    onExpand(expandAll, tree) { // 节点展开
      this[expandAll] = !this[expandAll]
      const treeArr = tree.split(',') // 改变每个节点的状态
      console.log(treeArr)
      treeArr.forEach((item) => {
        this.changeTreeNodeStatus(expandAll, this.$refs[item].store.root)
      })
    }, // 改变节点的状态
    changeTreeNodeStatus(expandAll, node) {
      node.expanded = this[expandAll]
      for (let i = 0; i < node.childNodes.length; i++) {
        // 改变节点的自身expanded状态
        node.childNodes[i].expanded = this[expandAll]
        // 遍历子节点
        if (node.childNodes[i].childNodes.length > 0) {
          this.changeTreeNodeStatus(expandAll, node.childNodes[i])
        }
      }
    },
    /*
       * 1. 功能说明：获取专利法树形结构
       * 2. 参数说明
       *    paneName：界面页签的英文名称
       */
    async _getPatentLawTree(tabName) {
      const { code, data } = await getPatentLawTree({ 'dataSource': tabName }) /* 获取专利法树形结构 */
      console.log(`-------------- _getPatentLawTree ---------------------`)
      console.log(data)
      console.log(code)
      if (code == 200) {
        this.patentTreeData = data
        // this.$message.warning('获取专利法树形结构！')
      }
    },
    // whm結束开始
    searchChange() {
      let resultSearch = ''
      const searchList = {
        categoryNo: '主分类号',
        applyDay: '申请日',
        room: '案源处室',
        keyword: '全文关键字',
        decideDay: '决定日'
      }
      for (const key in this.search) {
        if (Array.isArray(this.search[key])) {
          // 数组
          let decideDay = ''
          this.search[key].forEach((item) => {
            decideDay += `'${item}',`
          })
          resultSearch += `${searchList[key]}=[${decideDay.replace(/\,$/, '')}] and `
        } else {
          if (this.search[key] !== '') {
            resultSearch += this.search[key] ? searchList[key] + "='%" + this.search[key] + "%' and " : ''
          }
        }
      }
      resultSearch = resultSearch ? `${resultSearch.replace(/and$/, '')}` : resultSearch
      this.searchDataText = resultSearch
    },
    /*
       * 1. 功能说明：获取实施细则树形结构
       * 2. 参数说明
       *    paneName：界面页签的英文名称
       */
    async _getImplementationDetailsTree(tabName) {
      const { code, data } = await getImplementationDetailsTree({ 'dataSource': tabName }) /* 获取实施细则树形结构 */
      console.log(`--------------_ getImplementationDetailsTree ---------------------`)
      console.log(data)
      console.log(code)
      if (code == 200) {
        this.implementationDetailsData = data
        // this.$message.warning('删除检索历史成功！')
      }
    },
    /*
       * 1. 功能说明：清除全部检索条件
       */
    clearAllSerachData() {
      this.checkedTree.recheck           = [] // 重置:[复审法律问题阶段]
      this.checkedTree.radio             = [] // 重置:[法律问题结论]
      this.checkedTree.clusion           = [] // 重置:[法律问题结论]
      this.checkedTree.wuxiao            = [] // 重置:[外观法律问题阶段]
      this.checkedTree.mention           = [] // 重置:[提及方]
      this.checkedTree.conclusion        = [] // 重置:[法律问题结论]
      this.checkedTree.compare           = [] // 重置:[与复审无效决定理由比较]
      this.checkedTree.process           = [] // 重置:[程序问题]
      this.checkedTree.processConclusion = [] // 重置:[程序问题结论]

      this.$nextTick(() => {
        this.$refs.patentTreeDataRef.setCheckedKeys([]) // 重置:[专利法]
        this.$refs.implementationDetailsDataRef.setCheckedKeys([]) // 重置:[实施细则]
      })

      this.search.categoryNo = '' // 重置:[主分类号]
      this.search.applyDay = '' // 重置:[申请日]
      this.search.room = '' // 重置:[案源处室]
      this.search.keyword = '' // 重置:[全文关键字]
      this.search.decideDay = '' // 重置:[决定日]

      this.patentData = '' // 重置:[选中表达式专利法]
      this.searchDataText = '' // 重置:[search输入框选中表达式]
      this.implementationData = ''// 重置:[实施细则表达式]
      this.expressionAllStr = ''// 重置:[法律问题树表达式]
    },
    /*
       * 1. 功能说明：法律问题检索-构建检索式接口
       * 2. 参数说明
       *    params:{keyWord:''，dataSource-数据类型[fushen,waiguan,wuxiao,susong], exp-表达式:xxx}
       */
    async _lawBuildSearch() {
      console.log(`-------------- _lawBuildSearch in ---------------------`)
      console.log(this.expressionStrResult)

      if(this.expressionStrResult == null || this.expressionStrResult.trim() == ""){
          this.$message("提示：请您选择或输入想要的[检索条件]。");
          return false;
      }

      const { code,data } = await lawBuildSearch({ keyWord: '', dataSource: this.paneName, exp: this.expressionStrResult }) /* 获取专利法树形结构 */
      console.log(code)
      console.log(data.expId)

      if(code == 200 && data.expId && data.expId != null) {      
          console.log("-------- _lawBuildSearch 表达式调用后台接口检验成功！ _lawBuildSearch ---------------");
          console.log("expId:" + data.expId + ";exp:"  + this.expressionStrResult);

          // 跳转到[概览]列表显示界面
          this.$router.push({ 
             path: '/pages/list', 
             query: {
                 expList: JSON.stringify(data),
                 dataSource: this.paneName
            }
          })
      }
    },
    // whm开始修改
    checkedTreeChange() {
    // 法律问题树表达式
      this.expressionAllStr = ''
      const checkedText = {
        clusion: '法律问题结论',
        wuxiao: '外观法律问题阶段',
        radio: '法律问题结论',
        recheck: '法律问题提出阶段',
        mention: '提及方',
        conclusion: '法律问题结论',
        compare: '与复审无效决定理由比较',
        process: '程序问题',
        processConclusion: '程序问题结论'
      }
      const radioObj = {
        //radio: ['不符合', '符合']
        //,
        //processConclusion: ['违法', '合法']
      }
      const dataTree = this.checkedTree
      for (const key in dataTree) {
        let dataTreeStr = ''
        if (Array.isArray(dataTree[key])) {
          if (dataTree[key].length !== 0) {
            let result = ''
            dataTree[key].forEach((item, idx) => {
              result += "'" + item + "',"
            })
            result = result.substring(0, result.length - 1)
            dataTreeStr += ` and ${checkedText[key]}=${result}`
            this.expressionAllStr += dataTreeStr
          }
        } else {
          if (dataTree[key]) {
            let res = ''
            res += "'" + radioObj[key][dataTree[key]] + "',"
            res = res.substring(0, res.length - 1)
            dataTreeStr += ` and ${checkedText[key]}=${res}`
            this.expressionAllStr += dataTreeStr
          }
        }
      }
    },
    // 树形数据处理
    treeFilter(allTreeChecked, name) {
      // 所有子节点
      allTreeChecked = allTreeChecked.filter((item) => {
        if (item['children'] === undefined || item['children'].length === 0) {
          return item
        }
      })
      // 表达式
      let resultChecked = ''
      allTreeChecked.forEach((item) => {
        resultChecked += "'" + item.label + "',"
      })
      resultChecked = resultChecked ? ` and ${name} = ${resultChecked.replace(/\,$/, '')}` : ''
      return resultChecked
    },
    // 专利法
    handleNodeClick(data, currentChecked) {
      // 当前选中的所有节点
      const allTreeChecked = this.$refs.patentTreeDataRef.getCheckedNodes()
      // this.patentData = allTreeChecked包含所有选中父节点
      this.patentData = this.treeFilter(allTreeChecked, '专利法')
    },
    // 实施细则
    implementationHandleNodeClick() {
      // 当前选中的所有节点
      const allTreeChecked = this.$refs.implementationDetailsDataRef.getCheckedNodes()
      // this.patentData = allTreeChecked包含所有选中父节点
      this.implementationData = this.treeFilter(allTreeChecked, '实施细则')
    }
    // whm结束修改
  }
  // DLJ MODIFY END
}
</script>

<style lang="scss" scoped>

.legal-pane {
  .evidence-main-title-r{
    float: right;
    color: #2d54b8;
    i {
        margin-left: 8px;
      }
      &:hover {
        cursor: pointer;
        color: #409eff;
      }
      &.is-active {
        i {
          transform: rotate(180deg);
        }
      }
  }
.normal{
    font-style:normal
}

  & > div:first-child {
    margin-top: 0;
  }

  &__title {
    display: flex;
    font-size: 18px;
    color: #303133;
    font-weight: 700;
    margin: 20px 0;

    &::before {
      content: '';
      display: block;
      width: 5px;
      height: 18px;
      background: #2d54b8;
      margin-right: 5px;
    }
  }

  &__expression {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 30px;
    color: #2d54b8;
    background: #ebeef5;
    margin-left: 10px;

    & > span:last-child {
      cursor: pointer;
    }
  }

  &__card {
    width: 570px;
    border-color: #dedfe6!important;

    &--arrow {
      transform: rotate(90deg);
    }

    ::-webkit-scrollbar
    {
      width: 5px;
      height: 110px;
      background-color: #dcdfe6;
    }
    /*定义滚动条轨道 内阴影+圆角*/
    ::-webkit-scrollbar-track
    {
      -webkit-box-shadow: inset 0 0 6px #fff;
      border-radius: 10px;
      background-color: #fff;
    }
    /*定义滑块 内阴影+圆角*/
    ::-webkit-scrollbar-thumb
    {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 6px #dcdfe6;
      background-color: #dcdfe6;
    }
  }

  &__footer {
    display: flex;
    justify-content: center;
  }
}
</style>
<style lang="scss">
  .legal-pane {
    .el-form {
      .el-form-item {
        margin-bottom: 10px;

        &__label,
        &__content {
          font-size: 16px;
          line-height: 1.5;
          font-weight: 400;
        }
      }
    }

    .el-checkbox {
      &__label {
        font-size: 16px;
      }
    }

    .el-card__header {
      border-color: #dedfe6!important;
    }

    .el-input__inner {
      background: #fafafa;
      width: 400px;
    }

    .el-range-input {
      background-color: #fafafa;
    }

    &__form {
      .el-form-item {
        margin-bottom: 20px!important;

        &__label {
          line-height: 40px!important;
        }
      }

    }

    ::placeholder {
      color: #c0c4cc!important;
    }
  }

</style>
<style lang="scss">
.el-tree-node{
    white-space: normal;
  }
  .el-tree-node__content {
    height: auto !important;
    line-height: 32px;
    align-items: normal;
  }
  [class^=el-icon-], [class*=" el-icon-"]{
    line-height: 1.6;
  }
$main-color: #303133;
$blue-color: #2d54b8;
$border-color: #dcdfe6;
.evidence-content {
  .el-tabs--border-card {
    border: 0;
    border-radius: 6px;
    box-shadow: none;
  }
  .el-tabs__item {
    padding: 0 14px;
  }
  .el-tabs--border-card > .el-tabs__header .el-tabs__item {
    border: 1px solid $border-color;
    margin-top: 0;
    color: $blue-color;
    border-radius: 6px 6px 0 0;
    margin-right: 10px;
    border-bottom: 0;
    background-color: #ebeef5;
    font-size: 16px;
  }
  .el-tabs--border-card > .el-tabs__header {
    background-color: #f7f7f7;
    margin-top: -1px;
    border-bottom: 1px solid $border-color;
  }
  .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    color: $main-color;
    background-color: #fff;
  }
  .el-tabs--border-card > .el-tabs__header .el-tabs__item + .el-tabs__item,
  .el-tabs--border-card > .el-tabs__header .el-tabs__item:first-child {
    margin-left: 0;
  }
  .el-tabs--border-card > .el-tabs__content {
    border-left: 1px solid $border-color;
    border-right: 1px solid $border-color;
    border-bottom: 1px solid $border-color;
    padding: 20px;
  }
}
.evidence-content {
  .evidence-form {
    margin-top: 20px;
  }
  .el-input__inner {
    height: 36px;
    line-height: 36px;
    border: 1px solid $border-color;
    background-color: #fafafa;
    font-size: 16px;
  }
  .el-date-editor .el-range-input,
  .el-date-editor .el-range-separator {
    background-color: #fafafa;
    font-size: 16px;
  }
  .el-date-editor .el-range-input {
    width: 43%;
  }
}
.evidence-submit-btn {
  .el-form-item__content {
    font-size: 16px;
    text-align: center;
    margin: 0 auto !important;
  }
  .el-button {
    padding: 10px 12px;
    color: $main-color;
    i {
      margin-right: 10px;
    }
  }
  .el-button--primary {
    padding-left: 80px;
    padding-right: 80px;
    color: #ffffff;
  }
}
.evidence-content {
  margin-top: 20px;
  .el-form-item {
    min-height: 40px;
    margin-bottom: 18px;
  }
  .el-form-item__label,
  .el-input__inner {
    font-size: 14px;
    color: $main-color;
    font-weight: normal;
  }
  .el-range-editor.el-input__inner {
    width: 100%;
  }
}
.evidence-main-form-item-con {
  .el-checkbox {
    float: left;
  }
  .legal-pane__card {
    width: 570px;
    border-color: #dedfe6 !important;

    &--arrow {
      transform: rotate(90deg);
    }
  }
}
.evidence-main-form-item-conner {
  .el-tree-node__label,
  .el-radio__label {
    font-size: 14px;
  }
  ::-webkit-scrollbar {
    width: 5px;
    height: 110px;
    background-color: #dcdfe6;
  }
  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #fff;
    border-radius: 10px;
    background-color: #fff;
  }
  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px #dcdfe6;
    background-color: #dcdfe6;
  }
}
.evidence-main-item {
  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: $blue-color;
    border-color: $blue-color;
  }

  .el-card {
    border: 0;
    border-top: 1px solid #e3e6ed;
    border-bottom: 1px solid #e3e6ed;
    padding: 6px 0;
  }
  .evidence-main-form-item-content .el-card {
    border: 0;
  }
  .el-card__body {
    padding: 0;
  }
  .el-tree-node__content {
    height: 32px !important;
    line-height: 32px;

  }
}
</style>
<style lang="scss" scoped>
$main-color: #303133;
$blue-color: #2d54b8;
$border-color: #dcdfe6;
.evidence-wrapper,
button,
input,
optgroup,
select,
textarea {
  font-family: "PingFang SC", Microsoft YaHei, Arial, sans-serif !important;
}
.evidence-wrapper {
  margin: 0 auto;
  width: 1200px;
  overflow: hidden;
  color: $main-color;
  font-size: 14px;
}
.evidence-title {
  margin-top: 20px;
  overflow: hidden;
  .evidence-title-l {
    font-size: 22px;
    float: left;
  }
}
.evidence-filter-title {
  font-size: 16px;
  font-weight: 700;
  position: relative;
  height: 16px;
  line-height: 16px;
  padding-left: 14px;
  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 4px;
    height: 100%;
    background-color: $blue-color;
  }
}
.evidence-filter {
  .evidence-filter-params {
    margin: 20px 0 0 14px;
    overflow: hidden;
    .evidence-filter-params-label {
      float: left;
      margin-right: 14px;
      height: 36px;
      line-height: 36px;
      color: #606266;
      font-size: 14px;
    }
  }
  .evidence-filter-params-t {
    .el-autocomplete {
      float: left;
      margin-right: 20px;
      width: 60%;
    }
    .el-button {
      float: left;
      margin: 0 20px 0 0;
      padding: 10px 20px;
      font-size: 14px;
    }

    i {
      margin-right: 10px;
    }
  }

  .evidence-filter-tips {
    margin: 20px 0 0 14px;
    background-color: #ebeef5;
    color: $blue-color;
    max-height: 200px;
    overflow: auto;
    line-height: 1.5;
    padding: 10px 20px;
    font-size: 14px;
    .evidence-filter-tips-text {
      float: left;
    }
    .evidence-filter-tips-edit {
      float: right;
      color: $blue-color;
      cursor: pointer;
      i {
        margin-right: 10px;
        font-size: 14px;
      }
      &:hover,
      &:focus {
        color: #5176c1;
      }
    }
  }
}
.evidence-content {
  position: relative;
  .evidence-more-btn {
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    color: $blue-color;
    font-size: 14px;
    i {
      margin-left: 10px;
      transform: rotate(-90deg);
      font-size: 12px;
      font-weight: 700;
    }
  }
}
.evidence-body {
  margin: 0 0 10px 0;
  .evidence-submit-btn {
    margin-bottom: -10px;
  }
  .evidence-item {
    margin-bottom: 20px;
  }
}
// 中间内容
.evidence-main {
  margin: 20px auto;
}
.evidence-main-item {
  border: 1px solid #dbdee5;
  overflow: hidden;
  .evidence-main-title {
    padding: 0 20px;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #dbdee5;
    .evidence-main-title-l {
      float: left;
    }
    .evidence-main-title-r {
      float: right;
      color: $blue-color;
      i {
        margin-left: 8px;
      }
      &:hover {
        cursor: pointer;
        color: #409eff;
      }
      &.is-active {
        i {
          transform: rotate(180deg);
        }
      }
    }
  }
  .evidence-main-form {
    margin: 10px 20px;
  }
  .evidence-main-form-item {
    line-height: 34px;
    overflow: hidden;
    .evidence-main-form-item-label {
      float: left;
    }
    .evidence-nofloat {
      float: none;
    }
    .evidence-main-form-item-con {
      color: #616266;
      float: left;
      margin-left: 12px;
    }
  }
}
.el-card__body{
  .el-tree{
    .el-checkbox__input{
      display: none !important;
    }
  }
}
</style>
